<template>
	<view class="content">
		<view class="text-area">
			<text :class="$style.active">{{ params.password }}</text>
		</view>
		<div>vuex的数据：{{ state.tabber.tabberIndex }}</div>
		<div>numList数组的长度：{{ passwordNum }}</div>
		<w-loading ref="loading" />
		<u-button @click="butClick">我是首页</u-button>
		<button @click="jupmClick">点击跳转--登录</button>
		<w-tabber />
		<w-compressImg ref="compressImg" />
		<u-button type="primary" text="压缩照片" @click="imgClick"></u-button>
		<u-button type="primary" text="照片加水印" @click="cameraClick"></u-button>
		<about :text="password" />
	</view>
</template>

<script setup>
	import about from './components/Me.vue';
	// import WLoading from '@/pages/commonPart/w-loading/w-loading.vue';
	import { getCurrentInstance, reactive, ref, onMounted, computed, watch, defineComponent } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const { state, commit, dispatch } = useStore();
	const { proxy } = getCurrentInstance(); // 全局引用
	let params = reactive({ password: 'sacsacas', iconLeft: true, tabberIndex: 0 });
	const { password, iconLeft, tabberIndex } = params;
	onLoad(options => {
		console.log('接收传值：', options);
		uni.hideHomeButton(); // 隐藏小房子
		commit('tabber/changeTabberIndex', params.tabberIndex); // 给导航栏下标赋值
		dispatch('tabber/tabberSupervise'); // 监督端
		// dispatch('tabber/tabberExpert'); // 专家端
	});
	onShow(() => {});
	// 打开loading
	const loading = ref();
	let dat = reactive({ imgText: '' });
	let butClick = () => {
		loading.value.openLoading();
		dat.imgText = '我是改变';
		params.password = '我是密码';
		// console.log('dat.imgText-----params.password,', dat.imgText, params.password);
		setTimeout(() => {
			loading.value.closeLoading();
		}, 3000);
	};
	onMounted(() => {
		// getStatisticsDetails(); // 请求的方法
	});
	let leftClick = () => {
		console.log(11111);
	};
	// 跳转
	let jupmClick = () => {
		proxy.$pageJump.navigateTo('/pages/views/loginRegister/login/Login?text=' + '你好呀' + '&age=' + 18);
	};

	// 计算属性
	let passwordNum = computed(() => {
		return password.length;
	});

	// 监听属性
	watch(
		state.tabber.tabberIndex,
		(newVal, oldVal) => {
			console.log('newVal, oldVal', newVal, oldVal);
		}, {
			deep: true,
			immediate: true
		}
	);

	// 请求接口
	let getStatisticsDetails = async () => {
		loading.value.openLoading('asdfasfa'); // 打开loading
		let dat = {
			tenantId: '000000',
			username: 'safajsk',
			password: proxy.$md5(params.password)
		};
		let header = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' };
		const data = await proxy.$http.get({ url: '/posts', data: dat, header: header });
		console.log('获取双随机任务的详情--------', data);
		loading.value.closeLoading(); // 关闭loading
	};

	// 图片压缩
	let compressImg = ref();
	let imgClick = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: function (res) {
				console.log(res.tempFilePaths);
				proxy.$refs.helangCompress
					.compress({
						src: res.tempFilePaths[0],
						maxSize: 1080,
						fileType: 'jpg',
						quality: 0.85,
						minSize: 640 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
					})
					.then(res => {
						// 压缩成功回调
						// console.log('压缩成功回调', res);
						proxy.$uploadImg.uploadImgOSS(res, 8).then(res => {
							console.log('压缩成功回调-王坤, res');
							if (res) {
								console.log('王坤, res');
							} else {
								proxy.$refs.loading.closeLoading(); // 关闭loading动画
								proxy.$refs.uToast.show({
									title: '上传失败，请重新上传',
									type: 'error'
								});
							}
						});
					})
					.catch(err => {
						// 压缩失败回调
						// console.log('压缩失败回调', err);
						proxy.$refs.loading.closeLoading(); // 关闭loading动画
						proxy.$refs.uToast.show({
							title: '上传失败，请重新上传！',
							type: 'error'
						});
					});
			}
		});
	};
</script>

<style scoped module lang="scss">
	.active {
		color: red;
	}
</style>